<template>
  <view>
    <view class="tab-bar">
      <view class="tab-bar-border"></view>
      <view v-for="(item, index) in list" :key="index" class="tab-bar-item"  @tap="switchTab(item.pagePath,index)">
        <image :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
        <view :style="selected == index?'color:' + selectedColor : 'color:' + color">{{item.text}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    // 定义 props 属性，用来接收外界传递到当前组件的数据
    props: {
      // 父级传递过来对象
      selected: {
         type: Number,
         default:0
      },
    },
    data() {
      return {
            index:0,
          	color: "#979797",
        		selectedColor: "#0C89FB",
            list: [
              {
                pagePath: "/devicelistpkg/index/index",
                text: "主页",
                iconPath: "https://mkservice.mk-iot.com/subFile/mk2240/index-on.png",
        				selectedIconPath: "https://mkservice.mk-iot.com/subFile/mk2240/index-off.png"
              },
              {
                pagePath: "/devicelistpkg/manage/index",
                text: "管理",
                iconPath: "https://mkservice.mk-iot.com/subFile/mk2240/control-on.png",
        				selectedIconPath: "https://mkservice.mk-iot.com/subFile/mk2240/control-off.png"
              },
              {
                pagePath: "/devicelistpkg/my/index",
                text: "我的",
                iconPath: "https://mkservice.mk-iot.com/subFile/mk2240/my-on.png",
              	selectedIconPath: "https://mkservice.mk-iot.com/subFile/mk2240/my-off.png"
              }
            ]
      }
    },
    methods: {
      switchTab(path,index) {
            uni.redirectTo({
              url:path,
            })
        }
    }
  }
</script>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  width: 25px;
  height: 25px;
}

.tab-bar-item view {
  font-size: 10px;
  margin-top: 10rpx
}

</style>
